<template>
  <div class="test_box_video">
    <div class="video">
      <div class="title">摄像头：</div>
      <el-select
        v-model="value"
        style="width: 460px"
        size="small"
        placeholder="请选择"
      >
        <el-option
          v-for="item in videoList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </div>
    <!-- 视频框 -->
    <video
      v-show="isSuccess"
      id="video"
      width="448px"
      height="252px"
      autoplay="autoplay"
    ></video>
    <img
      class="user-img"
      v-show="!isSuccess"
      src="@/assets/img/testing/userImg.png"
      alt=""
    />
    <!-- 能否在上方看到 -->
    <div class="problem">是否在上方看到自己的画面？</div>
    <div class="choose_button">
      <el-button @click="chooseStatus(1)" :class="status == 1 ? 'active' : ''"
        >可以看到</el-button
      >
      <el-button @click="chooseStatus(2)" :class="status == 2 ? 'active' : ''"
        >不能看到</el-button
      >
    </div>
    <!-- 提示 -->
    <div class="tips" v-if="status == 2">
      <p>看不到画面？试试如下方法：</p>
      <p>1、请在浏览器弹窗中选择允许使用摄像头</p>
      <p>2、若是外接摄像头，试试换个插口重新插入</p>
      <p>3、在选择项中选择正确的摄像头</p>
      <p>4、关闭其他使用摄像头的应用程序</p>
      <p>5、尝试重启电脑</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      videoList: [],
      status: 0,
      MediaStream: null,
      video: null,
      isSuccess: false,
    };
  },
  mounted() {
    this.getMedia();
  },
  destroyed() {
    this.video.pause();
    this.MediaStream.getTracks().forEach((track) => {
      track.stop();
    });
  },
  methods: {
    chooseStatus(item) {
      this.status = item;
      //   可以看到
      if (item == 1) {
        this.$emit("sysStatus", true);
      } else {
        //   不可以看到
        this.$emit("sysStatus", false);
      }
    },
    getMedia() {
      //获得video摄像头区域
      let video = document.getElementById("video");
      let constraints = {
        video: { width: 448, height: 252 },
        audio: true,
      };
      /*
        这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
        这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
        返回的是一个Promise对象。
        如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
        如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
        */
      let promise = navigator.mediaDevices.getUserMedia(constraints);
      let videoId = "";
      promise
        .then((MediaStream) => {
          video.srcObject = MediaStream;
          this.video = video;
          this.MediaStream = MediaStream;
          MediaStream.getTracks().forEach((item, index) => {
            if (item.kind == "video") {
              video.srcObject = MediaStream;
              if (!videoId) {
                videoId = item.id;
                this.value = videoId;
              }
              this.videoList.push({
                label: item.label,
                value: item.id,
              });
            }
          });
          this.isSuccess = true;
          video.play();
        })
        .catch((PermissionDeniedError) => {
          this.isSuccess = false;
          console.log(PermissionDeniedError);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.test_box_video {
  padding: 0 65px;
  box-sizing: border-box;
  .video {
    display: flex;
    align-items: center;
    margin-left: -65px;
    .title {
      width: 64px;
      text-align: left;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 16px;
    }
    .el-select-dropdown__item {
      // padding: 0 10px;
    }
  }
  #video,
  .user-img {
    margin-top: 14px;
    width: 448px;
    height: 252px;
  }
  .problem {
    margin-top: 24px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 22px;
  }
  .choose_button {
    font-size: 0;
    margin-top: 13px;
    button {
      display: inline-block;
      height: 29px;
      width: 137px;
      margin-right: 50px;
      line-height: 29px;
      padding-top: 0;
      padding-bottom: 0;
      cursor: pointer;

      font-size: 14px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
    }
    .active {
      background: #475aa7;
      border: solid 1px #475aa7;
      color: #ffffff;
    }
  }
  .tips {
    margin-top: 30px;
    p {
      margin: 0;
      padding: 0;
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.65);
      line-height: 18px;
    }
  }
}
</style>

